<template>
  <el-upload
    drag
    :action="upLoadFileAction"
    multiple
    :headers="{
        token
    }"
    name="img"
    :data="data"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
// 引入上传地址
import { upLoadFileAction } from '~/api/image'
import { getToken } from '~/composables/auth'
import { toast } from '~/composables/util'

// 给请求体参数
const token = getToken()

// 从父组件接收请求体
const props = defineProps({
    data:{
        type:Object,
        default: {}
    }
})

// 向父组件通知方法
const emit = defineEmits(['success'])

// 上传成功方法
const handleSuccess = (response, uploadFile, uploadFiles) => {
    toast('上传成功')
    // 通知父组件上传成功
    emit('success', response, uploadFiles, uploadFile)
}

// 上传失败方法
const handleError = (error, uploadFile, uploadFiles) => {
    // 解析错误信息
    let msg = JSON.parse(error.message).msg || '上传失败'
    toast(msg,'error')
}

</script>
